<% siblings = notification.json_data["aggregated_siblings"].length %>
<div class="crayons-card notification <% if siblings == 1 %> notification--middle <% else %> flex-col items-center <% end %>">
  <% if siblings == 1 %>
    <% first_notification = notification.json_data["aggregated_siblings"].first %>
    <% cache "activity-profile-pic-#{first_notification['id']}-#{first_notification['profile_image_90']}" do %>
      <a href="<%= first_notification["path"] %>" class="crayons-avatar crayons-avatar--l <% if notification.json_data["aggregated_siblings"].length == 1 %>m:crayons-avatar--xl<% end %> shrink-0" tabindex="-1" aria-hidden="true">
        <img src="<%= first_notification["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= first_notification["username"] %>'s profile" width="48" height="48">
      </a>
    <% end %>
    <div class="notification__content">
      <% cache "activity-follow-button-#{first_notification['path']}-#{first_notification['name']}" do %>
        <div class="flex justify-between items-center">
          <p><%= t("views.notifications.follow.single_html", name: link_to(first_notification["name"], first_notification["path"], class: "crayons-link fw-bold")) %></p>
          <%= follow_button(notification.decorate.mocked_object("user"), "follow-back") %>
        </div>
      <% end %>
    </div>
  <% else %>
    <% json_data_array = notification["json_data"]["aggregated_siblings"] %>
    <div class="flex mb-3 max-w-100 overflow-x-hidden">
      <% notification.json_data["aggregated_siblings"][0..10].each do |sibling| %>
        <a href="<%= sibling["path"] %>" class="crayons-avatar crayons-avatar--l shrink-0 mx-1" <% if sibling["id"] == json_data_array.first["id"] %> tabindex="-1" aria-hidden="true"<% end %>>
          <img src="<%= sibling["profile_image_90"] %>" class="crayons-avatar__image" alt="link to <%= sibling["name"] %>'s profile" width="32" height="32" loading="lazy" />
        </a>
      <% end %>
    </div>
    <p>
      <% if siblings == 2 %>
        <%= t("views.notifications.follow.and_html", first: link_to(json_data_array.first["name"], json_data_array.first["path"], class: "crayons-link fw-bold"), second: link_to(json_data_array.second["name"], json_data_array.second["path"], class: "crayons-link fw-bold")) %>
      <% else %>
        <%= t("views.notifications.follow.and_other_html", first: link_to(json_data_array.first["name"], json_data_array.first["path"], class: "crayons-link fw-bold"), others: t("views.notifications.follow.others", count: siblings - 1), count: siblings) %>
      <% end %>
    </p>
  <% end %>
</div>
